<template>
	<view class="log">
		<view class="title">
			<view class="left">
				<text class="time">{{data.time}}</text>
			</view>
			<view class="right" @tap="webView(data.hash)">
				<text class="state state1" v-if="data.state==1">成功</text>
				<text class="state " v-else>进行中</text>
				<image src="/static/images/market/right.png" mode="" class="icon"></image>
			</view>
		</view>
		<view class="content">
			<view class="iconBox">
				<image :src="'/static/images/tokenicon/' +data.from_contract+'ETH5867.png'" mode="" class="fromIcon"></image>
				<image :src="'/static/images/tokenicon/' +data.to_contract+'ETH5867.png'" mode="" class="toIcon"></image>
				<!-- <image src="/static/images/notoken.png" mode="widthFix" class="toIcon"></image> -->
			</view>
			<view class="nameBox">
				<text>{{data.from_coin}}</text>
				<image src="../../static/images/market/jiantou.png" mode="" class="jiantou"></image>
				<text>{{data.to_coin}}</text>
			</view>
			<view class="number">
				<view class="num1 state">
					+{{data.to_amount}}
				</view>
				<view class="num2">
					-{{data.from_amount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "log",
		props: {
			data: {
				type: Object,
				default: {}
			},
		},
		computed: {},
		mounted() {
		},
		methods: {
			webView(hash) {
				let web = `https://www.jumpfinance.org//tx/${hash}`
				uni.navigateTo({
					url: `/pages/webView/webView?title=区块浏览器&url=${web}`
				})
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.log {
		width: 100%;
		box-sizing: border-box;
		background: #FFF;
		border-radius: 20upx;
		padding: 18upx 36upx;
		margin-bottom: 20upx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.state {
					font-size: 32upx;
					color: #EE5E55;
					margin-right: 16upx;
				}

				.time {
					color: #A2A2A2;
					font-size: 24upx;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.state {
					font-size: 32upx;
					color: #EE5E55;
					margin-right: 10upx;
				}

				.state1 {
					color: #368321;
				}

				.logo {
					width: 40upx;
					height: 40upx;
					border-radius: 20upx;
					margin-right: 4upx;
				}

				.icon {
					width: 20upx;
					height: 20upx;
				}
			}
		}

		.content {
			background: #F0F3F8;
			border-radius: 18upx;
			display: flex;
			align-items: center;
			padding: 28upx 20upx;
			margin-top: 20upx;

			.iconBox {
				display: flex;
				align-items: center;

				.fromIcon {
					width: 50upx;
					height: 50upx;
				}

				.toIcon {
					width: 50upx;
					height: 50upx;
					margin-left: -20upx;
				}
			}

			.nameBox {
				display: flex;
				align-items: center;
				margin-left: 20upx;
				font-size: 28upx;

				.jiantou {
					width: 32upx;
					height: 32upx;
					margin: 0 10upx;
				}
			}

			.number {
				flex: 1;
				text-align: right;
				font-size: 24upx;

				.state {
					color: #E13838;
				}

				.state1 {
					color: #E13838;
				}
			}
		}
	}
</style>